Modales en Bootstrap

Los modales en Bootstrap son cuadros de diálogo emergentes que se pueden usar para mostrar información adicional sin necesidad de cambiar de página.

Estructura básica de un modal

Un modal en Bootstrap se compone de tres partes principales:

Encabezado (.modal-header) → Contiene el título y el botón de cierre.
Cuerpo (.modal-body) → Contiene el contenido principal.
Pie (.modal-footer) → Contiene botones de acción.

Ejemplo de código

<!-- Botón para activar el modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#miModal">
  Abrir Modal
</button>

<!-- Estructura del Modal -->
<div class="modal fade" id="miModal" tabindex="-1" aria-labelledby="miModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="miModalLabel">Título del Modal</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
      </div>
      <div class="modal-body">
        Contenido del modal aquí.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
        <button type="button" class="btn btn-primary">Guardar cambios</button>
      </div>
    </div>
  </div>
</div>

Tipos de Modales

Modal centrado verticalmente

Para centrar el modal verticalmente, se usa .modal-dialog-centered:

<div class="modal-dialog modal-dialog-centered">
  <div class="modal-content">
    <!-- Contenido del modal -->
  </div>
</div>

Modal con scroll interno

Si el contenido del modal es extenso, se puede hacer scroll dentro del cuerpo usando .modal-dialog-scrollable:

<div class="modal-dialog modal-dialog-scrollable">
  <div class="modal-content">
    <!-- Contenido del modal -->
  </div>
</div>

Tamaños de Modal

Bootstrap permite modificar el tamaño del modal con las siguientes clases:

.modal-sm → Modal pequeño.
.modal-lg → Modal grande.
.modal-xl → Modal extra grande.

Ejemplo:

<div class="modal-dialog modal-lg">
  <div class="modal-content">
    <!-- Contenido del modal -->
  </div>
</div>

Eventos en Modales

Bootstrap permite escuchar eventos cuando un modal se abre o se cierra.

Ejemplo en JavaScript:

let miModal = document.getElementById('miModal');
miModal.addEventListener('shown.bs.modal', function () {
  console.log('El modal se ha abierto');
});

Cierre Automático de Modales

Los modales pueden cerrarse de manera automática después de un tiempo usando JavaScript:

setTimeout(function() {
  let modal = new bootstrap.Modal(document.getElementById('miModal'));
  modal.hide();
}, 5000); // Se cierra después de 5 segundos

Con estas configuraciones, los modales en Bootstrap pueden adaptarse a diferentes necesidades y mejorar la experiencia de usuario.